<template>
	<div class="swiper" @mousemove="overHd()" @mouseout="outHd()">
		
		<div class="slide" v-for="(item,index) in gallery" :key="item"
		v-show="index==current"
		>
		<transition name="fade">
			<img :src="item" alt="" width="100%">
		</transition>
		
		</div>
		<button class="left" @click="current--" :disabled="this.current==0">上一页</button>
		<button class="right"  @click="current++" :disabled="this.current==this.gallery.length-1">下一页</button>
		<div class="thumb">
			
			<span @click="current=item-1" 
			v-for="item in gallery.length"
			:key="item"
			:class="{'active':item==current+1}"
			>
				{{item}}
			</span>
			
		</div>
	</div>
</template>

<script>
	export default{
		props:{
			time:{type:Number,default:3000},
			gallery:{Type:Array,default(){return []}}
		},
		data(){
			return{
				current:0,
				ind:null,
				rightbtn:false,
				
			}
		},
		created(){
			this.auto()
		},
	methods:{
		auto(){
			this.ind = setInterval(()=>{
				this.current++;
			
				if(this.current>=this.gallery.length){
					this.current = 0;
					
				}
				
			},this.time)
		},

			overHd(){
				clearInterval(this.ind)
			},

			outHd(){
	
				this.auto()
			}
		}
	}
</script>

<style>
	.active{
		color: red;
		background-color: rgba(0,255,255,0.4) !important;
	}
	.thumb span{
		width: 20px;height: 20px;
		display: inline-block;margin-left: 5px;
		border-radius: 50%;
		background-color: #FF7700;
		text-align: center;
		line-height: 20px;
	}
	.swiper{
		position: relative;
	}
	.thumb{
		position: absolute;bottom: 10px;left: 0;right: 0;margin: auto;
	}
	.left,.right{
		width: 25px;height: 60px;
		background-color:pink;border: none;
	}
	.left{
		position: absolute;
		left: 30px;top: 50%;
	}
	.right{
		position: absolute;
		right: 30px;top: 50%;
	}
	
	
</style>
